<template>
	<Alert v-if="fp.msg">{{ fp.msg }}</Alert>
	<Row type="flex" style="height:30px" align="middle">
		<Col span="12">
		<RadioGroup v-model="fp.userId">
			<Radio :label="item.value" v-for="(item, index) in fp.users">{{ item.name }}</Radio>
		</RadioGroup>
		</Col>
		<Col span="12">
		当前：{{ fp.nowTurn == 0 ? '白棋走' : '黑棋走' }}
		</Col>
	</Row>
	<div class="chessboard">
		<div class="cb-inner">
			<div class="cb-item" v-for="(item, index) in fp.list" :class="['x' + item.x, 'y' + item.y]">
				<div class="cb-dot" :class="[{ 'on': item.selected }, 'type' + item.user]" @click="onSelect(item)">
				</div>
			</div>
		</div>
	</div>
	<Row>
		<Button type="default" @click="select">Select</Button>
		<Button type="default" @click="testCol">testCol</Button>
		<Button type="default" @click="testRow">testRow</Button>
		<Button type="default" @click="testBackSlash">testBackSlash</Button>
		<Button type="default" @click="testSlash">testSlash</Button>
		<Button type="default" @click="fp.revocation()">revocation</Button>
		<Button type="default" @click="fp.reset()">reset</Button>
		<!-- <Button type="default" @click="show"></Button> -->
	</Row>
	<div class="row" style="display: none;">
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
		<div class="col">
			<div class="box1"></div>
		</div>
	</div>
</template>
<script>
import { FivePoint } from './251016.five';
export default {
	name: 'myBox',
	data() {
		return {
			fp: new FivePoint(this)
		}
	},
	mounted() {
		this.fp.init();
	},
	methods: {
		show() {
			this.$Message.success('成功');
		},
		onSelect(item) {
			this.fp.selectItem(item);
		},
		select() {
			this.fp.selectItem(this.fp.list[0]);
			// let arr = [[5, 5], [5, 6], [5, 7], [5, 8], [5, 9]];
			// arr.forEach(res => {
			// 	this.fp.select(res[0], res[1], 1);
			// });
			// this.fp.checkPoint([0, 9]);
		},
		testSlash() {
			let arr = [[5, 5], [4, 6], [3, 7], [2, 8], [1, 9]];
			arr.forEach(res => {
				this.fp.select(res[0], res[1], 1);
			});
			this.fp.checkPoint([1, 9]);
		},
		testBackSlash() {
			let arr = [[5, 5], [6, 6], [7, 7], [8, 8], [9, 9]];
			arr.forEach(res => {
				this.fp.select(res[0], res[1], 1);
			});
			this.fp.checkPoint([9, 9]);
		},
		testCol() {
			let arr = [[5, 5], [5, 6], [5, 7], [5, 8], [5, 9]];
			arr.forEach(res => {
				this.fp.select(res[0], res[1], 1);
			});
			this.fp.checkPoint([5, 9]);
		},
		testRow() {
			let arr = [[4, 5], [5, 5], [6, 5], [7, 5], [8, 5]];
			arr.forEach(res => {
				this.fp.select(res[0], res[1], 1);
			});
			this.fp.checkPoint([8, 5]);
		}
	}
}
</script>
<style lang="scss" scoped>
.chessboard {
	.cb {
		&-inner {
			display: grid;
			grid-template-columns: repeat(20, 1fr);
		}
	}
	.cb {
		&-item {
			position: relative;
			display: block;
			padding-top: 100%;
			&.x9, &.y9 {
				&:after {
					display: none;
				}
			}
			&:after {
				content: '';
				display: block;
				padding-top: 100%;
				width: 100%;
				border: 1px solid saddlebrown;
				background: burlywood;
				//opacity: 0.1;
				position: absolute;
				left: 50%;
				top: 50%;
				pointer-events: none;
			}
		}
		&-dot {
			border-radius: 100%;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			&.on {
				background: grey;
			}
			&.type1 {
				background: white;
			}
			&.type2 {
				background: black;
			}
		}
	}
}
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: 30px;
	.col {
		aspect-ratio: 1/1;
		border: 1px solid #574a4a;
	}
	.box1 {
		aspect-ratio: 1/1;
		transform: translate(-50%, -50%);
	}
}
</style>